<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--http://localhost:8080/jdbc/html/regular/regular.html-->
    <title>正则表达式</title>
    <style>

        /*水平左右居中用text-align: center
        上下垂直居中用行高 line-height,或者弹性盒子模型*/
        html, css {
            width: 100%;
            height: 100%;
        }

        .main {
            width: 200px;
            height: 200px;
            display: table-cell;
            border: 1px solid red;
            padding: 12px;
            vertical-align: middle; /*文字 上下居中,垂直居中 前提是display: table-cell*/
            text-align: center; /*文字    左右居中,水平居中*/
        }

        .test1 {
            margin: 0 auto;
            width: 100px;
            height: 100px;
            border: 1px solid #8972ff;
        }


    </style>
</head>


<body>
<div class="main">
    <div class="test1">水平左右居中用text-align: center


    </div>
</div>
</body>
</html>